<template>
    <div class="app-container bg-white" :style="{'box-shadow': isIframe ? 'none' : ''}">
        <!-- <div class="page-header flex align-center space-between border_bottom_1">
            <div class="font-weight--lg font-size--lg">商品详情</div>
        </div> -->
        <el-collapse v-model="activeNames" v-if="baseInfo">
  <el-collapse-item title="基本信息" name="1">
    <div class="padding_15" id="baseInfo" v-show="isShow1">
                <el-row>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                            <label class="el-form-item__label">商品类型：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.isEntity">{{baseInfo.isEntity}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品分类：</label>
                            </div>
                            <div v-if="isIframe">
                                <div v-if="baseInfo.goodsCategory && baseInfo.goodsCategory.relationRule">{{baseInfo.goodsCategory.relationRule}}</div>
                                <div v-else>无</div>
                            </div>
                            <div v-else>
                                <div v-if="baseInfo.categoryName">{{baseInfo.categoryName}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品名称：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.title">{{baseInfo.title}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品品牌：</label>
                            </div>
                            <div v-if="isIframe">
                                <div v-if="baseInfo.goodsBrand && baseInfo.goodsBrand.name">{{baseInfo.goodsBrand.name}}</div>
                                <div v-else>无</div>
                            </div>
                            <div v-else>
                                <div v-if="baseInfo.brandName">{{baseInfo.brandName}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                 <el-row><el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品供应商：</label>
                            </div>
                            <div v-if="isIframe">
                                <div v-if="baseInfo.goodsSupplier && baseInfo.goodsSupplier.name">{{baseInfo.goodsSupplier.name}}</div>
                                <div v-else>无</div>
                            </div>
                            <div v-else>
                                <div v-if="baseInfo.supplierName">{{baseInfo.supplierName}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品税码：</label>
                            </div>
                            <div v-if="isIframe">
                                <div v-if="baseInfo.taxNumber">{{baseInfo.taxNumber}}</div>
                                <div v-else>无</div>
                            </div>
                            <div v-else>
                                <div v-if="baseInfo.taxNumber">{{baseInfo.taxNumber}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col> 
                </el-row>
                <el-row>
                    
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品编码：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.goodsNo">{{baseInfo.goodsNo}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                     <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品税率：</label>
                            </div>
                            <!-- <div v-if="isIframe">
                                <div v-if="baseInfo.taxNumber">{{baseInfo.taxNumber}}</div>
                                <div v-else>无</div>
                            </div> v-else-->
                            <div >
                                <div v-if="baseInfo.taxRate">{{Number(baseInfo.taxRate)*100 + '%'}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品介绍：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.subtitle">{{baseInfo.subtitle}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">驳回原因：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.auditRemark">{{baseInfo.auditRemark}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">供应商货号：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.articleNumber">{{baseInfo.articleNumber}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">生产年份：</label>
                            </div>
                            <div>
                                <div v-if="baseInfo.productionTime">{{baseInfo.productionTime}}</div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品图片：</label>
                            </div>
                            <div>
                                <template v-if="baseInfo.surfaceImg" class="shopFengmian">
                                    <div class="marsk">
                                        <i class="el-icon-star-on"></i>
                                        <div>封面</div>
                                    </div> 
                                    <el-image class="shop_avator margin_10" :src="imgBaseUrl + baseInfo.surfaceImg" :preview-src-list="[imgBaseUrl + baseInfo.surfaceImg]" style="float:left"></el-image>
                                </template>
                                <div class="demo-image__preview" v-if="imgFileList && imgFileList.length" style="float:left">
                                    <el-image class="shop_avator margin_10" v-for="(item, index) of imgFileList " :key="index" :src="item" :preview-src-list="imgFileList "></el-image>
                                </div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品视频：</label>
                            </div>
                            <div>
                                <div class="demo-image__preview" v-if="videoFileList && videoFileList.length" style="float:left">
                                    <video class="shop_avator margin_10" v-for="(item, index) of videoFileList " :key="index" :src="item" controls="controls"></video>
                                </div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品详情：</label>
                            </div>
                            <div>
                                <!-- <div v-if="baseInfo.introduction" v-html="baseInfo.introduction" class="el-form-item__content1"></div> -->
                                <AppEditor v-model="baseInfo.introduction" show-mode v-if="baseInfo.introduction"></AppEditor>
                                <div v-else class="el-form-item__content1">无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                
            </div>
  </el-collapse-item>
  <el-collapse-item title="SKU信息" name="2">
    <div class="padding_15" v-show="isShow2">
                <el-table :data="skuList" stripe :header-cell-style="tableHeaderStyle">
                    <el-table-column prop="skuNo" label="SKU编码" width="280">
                        <template slot-scope="scope">
                            <div class="flex align-center flex-start margin_top_10">
                                <div style="width: 120px">SKU编码：</div>
                                <div style="width: 140px">
                                    <div>{{scope.row.skuNo ? scope.row.skuNo : 0}}</div>
                                </div>
                            </div>
                            <div class="flex align-center flex-start margin_top_10">
                                <div style="width: 120px">供货商货号：</div>
                                <div style="width: 140px">
                                    <div>{{scope.row.articleNumber ? scope.row.articleNumber : ''}}</div>
                                    <!-- <el-input size="small" v-model.trim="scope.row.skuSupplyNo" placeholder="请输入供货商货号" maxlength="30"></el-input> -->
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="surfaceImg" label="SKU图片">
                        <template slot-scope="scope">
                            <el-image class="shop_avator_sku" :src="imgBaseUrl + scope.row.imgUrl" :preview-src-list="[imgBaseUrl + scope.row.imgUrl]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="propertyList" label="属性">
                        <template slot-scope="scope">
                            <div v-for="(item,index) in scope.row.propertyList" :key="index">{{item.property}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="propertyList" label="属性值">
                        <template slot-scope="scope">
                            <div v-for="(item,index) in scope.row.propertyList" :key="index">{{item.propertyValue}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="skuCostPrice" label="价格类型" v-if="!isIframe">
                        <template slot-scope="scope">
                            <div>{{scope.row.skuCostPrice.name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="skuCostPrice" label="价格">
                        <template slot-scope="scope">
                            <div v-for="(item,index) in scope.row.skuCostPrice.children" :key="index">{{item.priceName}}:{{item.value}}
                                <el-tooltip class="item" effect="dark" :content="item.remark" placement="right">
                                        <i class="el-icon-question"></i>
                                        </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="qty" label="库存"></el-table-column>
                    <!-- <el-table-column prop="skuCostPrice" label="尺码模板" v-if="size">
                        <template slot-scope="scope">
                            <div>{{scope.row.skuCostPrice.name}}</div>
                        </template>
                    </el-table-column> -->
                   <el-table-column prop="sizeType" label="尺码模板" v-if="size">
                        <template slot-scope="scope">
                        <div>{{ scope.row.sizeType?scope.row.sizeType.title : '--' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sizeList" label="尺码数据" v-if="size">
                        <template slot-scope="scope" >
                        <div v-if="scope.row.sizeList.length>0">
                        <div v-for="(item, index) in scope.row.sizeList" :key="index">
                            {{ item.sizeName }}:{{ (item.value || item.value == 0) ?item.value: '--' }}
                        </div>
                        </div>
                        <div v-else>无</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
  </el-collapse-item>
  <el-collapse-item title="营销信息" name="3">
    <div class="padding_15" v-show="isShow3">
                 <el-row>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品标签： </label>
                            </div>
                            <div>
                                <div v-if="baseInfo.tagEntityList && baseInfo.tagEntityList.length">
                                    <div v-for="(item, index) of baseInfo.tagEntityList" :key="index" class="tagEntity">{{item.name}}</div>
                                </div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">初始销量：</label>
                            </div>
                            <div>
                                <div>{{baseInfo.initVolume}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                 <el-row>
                     <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">分享设置：</label>
                            </div>
                            <div>
                                <el-switch :value="baseInfo.isShare == 1" disabled></el-switch>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">分销设置：</label>
                            </div>
                            <div>
                                <div>
                                    <el-switch :value="baseInfo.isDistribution == 1" disabled></el-switch>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="!isIframe">
                    <el-col :span="24">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">建议渠道：</label>
                            </div>
                            <div>
                                <template v-if="baseInfo.channelList && baseInfo.channelList.length">
                                    <div v-for="(item, index) of baseInfo.channelList" :key="index" class="channelItem">{{item.channelName}}</div>
                                </template>
                                <template v-else>无</template>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="el-form-item el-form-item--medium">
                            <label class="el-form-item__label">商品资料包：</label>
                            <el-table stripe :data="fileList" :header-cell-style="tableHeaderStyle" v-loading="loading" class="margin_top_20" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="42"></el-table-column>
                                <el-table-column type="index" label="序号"></el-table-column>
                                <el-table-column prop="originalFilename" label="资料">
                                    <template slot-scope="scope">
                                        <span class="text-brand">{{scope.row.originalFilename}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="fileDownload([baseUrl + scope.row.url])">下载</el-button>
                                        <el-button size="mini" type="danger" @click="fileRemove([scope.row.id])" v-show="!isIframe">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <div class="margin_top_10" v-show="fileList.length">
                                <el-button @click="allFileDownload()">下载资料包</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
  </el-collapse-item>
  <el-collapse-item title="操作日志" name="4" v-if="logList && logList.length">
    <div class="padding_15">
                <el-row v-infinite-scroll="loadLogData" :infinite-scroll-disabled="noMoreLogData" style="overflow:auto; height: 320px;">
                    <el-col :span="24" v-for="(item,index) in logList" :key="index">
                        <div class="el-form-item el-form-item--medium">
                            <div>
                                <div >{{item.createTime}}: {{item.content}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" v-if="noMoreLogData">没有更多了</el-col>
                </el-row>
            </div>
  </el-collapse-item>
</el-collapse>
    </div>
</template>

<script>
import AppEditor from '@/components/AppEditor/index';
import Setting from '@/settings';
// import Tinymce from '@/components/Tinymce';
import { GetStoreItemDetail, GetStoreItemDetailMCH, GetStoreItemDetailLog,UpdateGoodsOneSKUStatus,GetGoodsZipList,UpdateGoodsZipList,GetAllStorePriceModel, GetSizeListCopy } from '@/views/store-management/services/index';
import * as defaultColor from '@/views/store-management/services/defaultColor';
export default {
     components: {
        AppEditor
    },
    props: {
        isIframe: false
    },
    data() {
        return {
            baseInfo: null,
            skuList: [],
            fileList: [],
            imgFileList: [],
            videoFileList: [],
            tableHeaderStyle: Setting.tableHeaderStyle,
            imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
            baseUrl: process.env.VUE_APP_FILE_URL + '/',
            logList: [],
            imgUrl: '@/icons/svg/zip.svg',
            loading: false,
            multipleSelection: [],
            shangpinId: '',
            priceTypeList: [],
            isShow1: true,
            isShow2: true,
            isShow3: true,
            storeDetail: null,
            activeNames: ['1'],
            pageIndex: 0,
            noMoreLogData: false,
            sizeTypeList: [],
            size: false
        }
    },
    created() {
        if (this.isIframe) {
            this.shangpinId = this.$route.params.id
            GetStoreItemDetailMCH({
                id: this.$route.params.id
            }).finally(() => this.getFileList(this.$route.params.id))
            .then(data => {
                if (data.code == 200) {
                    this.baseInfo = data.data;
                       this.baseInfo.isEntity = this.baseInfo.isEntity===0?'实物商品': '虚拟商品';
                    if(this.baseInfo.goodsFileList && this.baseInfo.goodsFileList.length) {
                        this.baseInfo.goodsFileList.map(item => {
                            if(item.fileType==1){
                               this.imgFileList.push(this.imgBaseUrl+item.fileUrl) 
                                }else {
                                this.videoFileList.push(this.imgBaseUrl+item.fileUrl)
                                }
                    })
                    }
                    if (this.baseInfo.goodsSkuList && this.baseInfo.goodsSkuList.length) {
                        this.skuList = this.baseInfo.goodsSkuList.map(item => {
                            console.log(item)
                            item.skuCostPrice = {
                                name: item.priceMap.name,
                                children: JSON.parse(item.priceMap.selectionPrice.replace(/\[,/g, '[')).map(childItem => {
                                    childItem.value = item[childItem.fieldName];
                                    return childItem;
                                })
                            };
                            console.log(item.skuCostPrice )
                            item.modelColor = item.modelColorId ? defaultColor.ColorList.find(color => color.id == item.modelColorId).name : '无';

                            item.propertyList = item.propertyRelationsList.map(item => item);
                            return JSON.parse(JSON.stringify(item));
                        });
                    }
                } else {
                    this.$message.error('商品基本信息加载失败!');
                    return;
                }
            })
            return;   
        }
        this.getAllPrice()
        this.getFileList(this.$route.params.id)
        this.loadLogData()
        this.getSizeModelList()
    },
    methods: {
        //获取所有的价格模板
        getAllPrice() {
            GetAllStorePriceModel()
            .finally(() => this.getStoreBaseInfo())
            .then(data => {
                if (data.code == 200) {
                    this.priceTypeList = data.data.map(item => {
                        return {
                            name: item.name,
                            value: item.id,
                            children: JSON.parse(item.selectionPrice.replace(/'/g,'"')).map(childItem => {
                                return {
                                    priceName: childItem.priceName,
                                    fieldName: childItem.fieldName,
                                    remark: childItem.remark,
                                    value: 0
                                }
                            })
                        }
                    })
                }
            })
        },
          // 获取尺码模板(不分页)
        getSizeModelList() {
            GetSizeListCopy({
                status: 1,
                search: '',
                sort: true,
                //  sortField: ''
            }).then(res=> {
                if(res.code == 200) {
                this.sizeTypeList = res.data
                }
            }).catch(err =>{
                console.log(err)
            })
        },
        //点击编辑按钮进行页面的跳转
        editXinXi(index) {
            if(index == 1) {
                this.isShow1 = !this.isShow1
            }else if(index == 2){
                this.isShow2 = !this.isShow2
            }else {
                this.isShow3 = !this.isShow3
            }
        },
        //商品资料包列表
        getFileList(id) {
            GetGoodsZipList({
                id: id,
                type: 1
            }).then(data => {
                if(data.code ===200) {
                        this.fileList = data.data;
                }
            })
        },
        // 获取商品的基本信息
        getStoreBaseInfo() {
            GetStoreItemDetail({
                id: this.$route.params.id
            })
            .then(data => {
                if (data.code == 200) {
                    this.baseInfo = data.data;
                    this.baseInfo.isEntity = this.baseInfo.isEntity===0?'实物商品': '虚拟商品';
                    if(this.baseInfo.goodsFileList && this.baseInfo.goodsFileList.length) {
                        this.baseInfo.goodsFileList.map(item => {
                            if(item.fileType==1){
                               this.imgFileList.push(this.imgBaseUrl+item.fileUrl)
                                }else {
                                 this.videoFileList.push(this.imgBaseUrl+item.fileUrl )   
                                }
                    })
                    }
                    if (this.baseInfo.goodsSkuList && this.baseInfo.goodsSkuList.length) {
                        this.skuList = this.baseInfo.goodsSkuList.map(item => {
                            let skuType = this.priceTypeList.find(child => child.value == item.priceTemplateId);
                            if (!skuType) {
                                skuType = this.priceTypeList[0];
                            }
                            const newskuType = JSON.parse(JSON.stringify(skuType));
                            console.log(newskuType)
                            item.skuCostPrice = newskuType;
                            item.skuCostPrice.children.forEach(childItem => {
                                childItem.value = item[childItem.fieldName];
                            });
                            item.modelColor = item.modelColorId ? defaultColor.ColorList.find(color => color.id == item.modelColorId).name : '无';
                            if(item.sizeTemplateId) {
                            this.size = true
                            let sizeType = this.sizeTypeList.find(child => child.id == item.sizeTemplateId)
                            if (!sizeType) {
                            sizeType = {}
                            }
                            console.log('gfkegfuehfielbhdfielhbgui',sizeType)
                            item.sizeType = JSON.parse(JSON.stringify(sizeType)) ;
                            item.sizeList = item.selectionSize ? JSON.parse(item.selectionSize) : JSON.parse(this.sizeTypeList.find(child => child.id == item.sizeTemplateId));
                            
                            }else {
                                this.size = false
                            }
                            return item;
                           
                        });
                    }
                } else {
                    this.$message.error('商品基本信息加载失败!');
                    return;
                }
            })
        },

        // 修改商品上下架状态
    changePriceStatus(row, index) {
      let status = Number(row.shelvesStatus) == 0 ? 1 : 0;
      UpdateGoodsOneSKUStatus({
        id: row.id,
        status: status
      })
      .then(data => {
        if (data.code == 200) {
          // this.$set(this.pageData, index, row);
          this.$message.success('修改成功!');
          row.shelvesStatus = status;
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }
      })
      .catch(error => {
        this.$message({
          type: 'error',
          message: '修改失败!'
        });
      })
    },

        //批量下载资料包
    allFileDownload() {
        if (!this.multipleSelection || !this.multipleSelection.length) {
            this.$message.warning('请选择需要下载的资源包!');
            return;
        }
        this.fileDownload(this.multipleSelection.map(item => this.baseUrl + item.url));
    },
        //下载资料包
        fileDownload(files) {
            this.filesDownload(files);
        },
    fileRemove(nodeIds) {
            this.$confirm('此操作将永久删除资源包, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                closeOnPressEscape: false,
                type: 'warning',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        UpdateGoodsZipList({ ids: nodeIds })
                        .then(data => {
                            instance.confirmButtonLoading = false;
                            if (data.code == 200) {
                                this.$message.success('删除成功!');
                                this.getFileList(this.shangpinId)
                                done()
                            } else {
                            this.$message.success('删除失败!');
                            }
                        })
                        .catch(error => {
                            instance.confirmButtonLoading = false;
                        })
                    } else {
                        done();
                    }
                }
            }).then(() => {
                this.getPageData();
            })
        },    
        handleSelectionChange(selectlist) {
            this.multipleSelection = selectlist;
        },
        //获取某个商品的操作日志
        loadLogData() {
            if (this.logLoading || this.noMoreLogData) return;
            this.pageIndex ++;
            GetStoreItemDetailLog({ targetId: this.$route.params.id, type: 1,  pageNum: this.pageIndex, pageSize: 10 })
            .then(data => {
                if (data.data.list < 10) {
                    this.noMoreLogData = true;
                }
                if (data.data.list && data.data.list.length) {
                    this.logList = this.logList.concat(data.data.list.map(item => {
                        return item;
                    }));
                }
            })
        }
        //  handleScroll(e){
        //     var scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop;      // 执行代码
        // }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
    background: #f8fafb;
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
}
.shop_avator {
  width: 160px;
  height: 160px;
}
.shop_avator_sku {
  width: 64px;
  height: 64px;
}
.shopFengmian {
    position: absolute;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    border: 1px dashed #DCDFE6;
    vertical-align: top;
}
    .marsk {
        width: 32px;
        height: 32px;
        opacity: 0.9;
        background: #ffffff;
        border-top-right-radius: 10px;
        bottom: 0;
        left: 0;
        text-align: center;
        line-height: 1;
        position: absolute;
        margin: 37px 10px;
        z-index: 1;
        > div {
          color: #5A5E66;
          font-size: 12px;
          transform: scale(0.75);
        }
}
    .marsk i {
          color: orange;
          font-size: 16px;
           }
.el-form-item__label {
    width: 100px;
    text-align: left;
    color: #999999;
}

.el-form-item__content {
    margin-left: 100px;
    text-align: left;
    word-break: break-all;
}
.el-form-item__content1 {
    width: 70%;
    height: 300px;
    opacity: 1;
    border: 1px solid rgba(0,0,0,0.20);
    padding: 0 10px;
    border-radius: 5px;
    overflow-y:scroll; 
}
.el-form-item__content1 p img {
        width: 100px;
        height: 100px;
    }
.skuItem {
    background: #f8fafb;
    color: #333333;
    padding-left: 10px; 
    height: 64px;
    line-height: 64px;
    font-size: 18px;
}
.channelItem {
    width: 113px;
    height: 64px;
    opacity: 1;
    border: 1px solid #43425d;
    border-radius: 5px;
    line-height: 64px;
    text-align: center;
    font-weight: 400;
    float: left;
    margin-right: 20px;
}
.editBtn {
    margin-left: 80%;
    font-size: 14px;
}

.tagEntity {
    width: 70px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    opacity: 1;
    background: #f0f2f5;
    border-radius: 3px;
    float: left;
    margin-right: 10px;
}
</style>
